<form class="layui-form" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">图片类型</label>
        <div class="layui-input-block">
            <select id="imageSelect" name="type" lay-filter="aihao"  lay-verify="required">
                <option value=""></option>
                <option value="1">资讯轮播</option>
                <option value="2">banner图</option>
                <option value="3">英雄轮播</option>

            </select>
        </div>
    </div>

    <input type="hidden" name="img_path" value="" id="imgPath"  lay-verify="required"/>




    <div class="layui-form-item">
        <label class="layui-form-label">选择图片</label>
        <div class="layui-input-block">
           <!-- <button type="button" class="layui-btn" id="imageUpload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>-->

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="imageUpload">上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>


        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

{literal}
<script>
    $(function () {


        layui.use(['layer', 'upload','form','table'], function(){
            var upload = layui.upload
                ,layer = layui.layer
                ,form = layui.form
                ,table = layui.table;

            //图片上传
            upload.render({
                elem: '#imageUpload'
                ,url: '/admin/image/upload' //上传接口
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        });
                }
                ,done: function(res){
                    //上传完毕
                    //console.log(res.data.src)
                    let path = res.data.src
                    $('#demo2').html('<img style="width: 100px;height: 100px" src="'+ path +'" alt="" class="layui-upload-img">')

                    $('#imgPath').val(path)
                }
            });

            //
            //监听提交


            form.on('submit(*)', function(data){
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}


                $.ajax({
                    url:'/admin/image/submitForm',
                    data:data.field,
                    type:'POST',
                    success:function () {
                        layer.closeAll()
                        $('#demo2').html('')

                        table.reload('imageTable')
                        layer.msg('提交成功')

                    },
                    error:function (res) {

                        layer.msg(res.responseJSON)
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

        });

    })
</script>
{/literal}